<template>
	<view>
		<view class="top_today_duty">
			<view class="top_duty_user">
				<text style="color: #FFFFFF;">{{weeksday.month}}月{{weeksday.day}}日</text>
				<text style="color: #FFFFFF;display: inline-block;margin-left: 3%;">{{weeksday.week}}</text>
				<view style="color: #FFFFFF;margin-bottom: 5%;">{{!todayWeek ? '暂无排班' : todayWeek}}</view>
			</view>
			<picker mode="date" fields="month" @change="bindDateChange">
				<image src="/static/image/calendar2.png" mode="aspectFit"></image>
			</picker>
		</view>
		<view class="caledar">
			<view class="dateWeek">
				<view v-for="(item,index) in weeks" :key="index">
					{{item}}
				</view>
			</view>
			<view class="dates">
				<view class="datetime" v-for="(item,index) in dayweek" :key="index" :style="[
							isToday(item) && todayObj
						]" @click="getCalDate(item)">
					<text class="textday" :class="[
							{notCurrentMonth: !isCurrentMonth(item)}
						]">{{ item.day}}</text>
					<!-- <view style="font-size: 22rpx;margin: 10rpx 4rpx 0 4rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"></view> -->
					<view style="font-size: 22rpx;margin: -8rpx 4rpx 0 4rpx;">{{item.workes}}</view>
					<view v-if="item.tooltip" :class="item.weeks == 6 ? 'tooltip_r':'tooltip'">
						<text>{{item.workName}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const getToday = (date) => {
		let year = date.getFullYear();
		let month = date.getMonth();
		let day = date.getDate();
		return {
			year,
			month,
			day
		}
	}
	const getDate = (year, month, day) => {
		return new Date(year, month, day)
	}
	export default {
		data() {
			return {
				weeks: ["日", "一", "二", "三", "四", "五", "六"],
				days: 0,
				year: 0,
				month: 0,
				day: 0,
				userId:null,
				weeksday: {},
				todayWeek:'',
				dayweek: [],
				userList: [],
				todayObj: {
					background: '#ffc060'
				},
			}
		},
		created() {
			this.getUserId();
			this.getDateTime();
			this.dateTime();
		},
		methods: {
			//个人排班列表
			async getSearchUser() {
				let dateTime = this.year + "-" + this.month;
				const res = await this
					.$myRequest({ //await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
						url: '/api-personnel/schedules/user?scheduleMonth=' + dateTime + '&staffId=' + this.userId,
						method: "get",
					})
				if (res.success == true) {
					this.userList = res.body.details;
					if (this.userList.length != 0) {
						for (let i in this.userList) {
							var getSearchDepts = this.userList[i].startTime;
							var timearr = getSearchDepts.replace(" ", ":").replace(/\:/g, "-").split("-");
							this.userList[i].workes = this.userList[i].workName.match("(.+(?=【))")["0"];
							this.userList[i].startTime = timearr[0] + "-" + timearr[1] + "-" + timearr[2];
							this.userList[i].idArray = this.userList[i].staffIdText.split(',');
						}
					}
				}
			},
			//获取月份
			dateTime() {
				this.getSearchUser();
				setTimeout(()=>{
					let dateWeek = getDate(this.year, this.month - 1, 1);
					let week = dateWeek.getDay();
					let starTime = dateWeek - week * 60 * 60 * 1000 * 24;
					this.dayweek = [];
					for (var i = 0; i < 42; i++) {
						let days = new Date(starTime + i * 60 * 60 * 1000 * 24);
						let year = days.getFullYear();
						let month = days.getMonth() + 1;
						let day = days.getDate();
						month = month > 9 ? month : '0' + month;
						day = day > 9 ? day : '0' + day;
						let workName = null;
						let workes = null;
						let ymdTime = year + "-" + month + "-" + day;
						let sumWeek = new Date(ymdTime);
						let weeks = sumWeek.getDay();
						let today = this.weeksday.year + "-" + this.weeksday.month + "-" + this.weeksday.day;
						if (this.userList.length != 0) {
							for (let j in this.userList) {
								if (ymdTime == this.userList[j].startTime) {
									workName = this.userList[j].workName;
									workes = this.userList[j].workes;
								}
								if(today == this.userList[j].startTime){
									this.todayWeek = this.userList[j].workName;
								}
							}
						}
						this.dayweek.push({
							year: year,
							month: month,
							day: day,
							workName: workName,
							workes:workes,
							weeks:weeks,
							tooltip:false
						})
					}
				},1000)
			},
			//获取点击数据
			getCalDate(data) {
				data.tooltip = true;
				setTimeout(()=>{
					data.tooltip = false;
				},1500)
				for (let i in this.dayweek) {
					if(data.day != this.dayweek[i].day){
						this.dayweek[i].tooltip = false;
					}
				}
			},
			//获取当前时间
			getDateTime() {
				let date = new Date();
				this.year = date.getFullYear();
				this.month = date.getMonth() + 1;
				this.day = date.getDate();
				this.month = this.month > 9 ? this.month : '0' + this.month;
				this.day = this.day > 9 ? this.day : '0' + this.day;
				let ymd = this.year + "-" + this.month + "-" + this.day;
				let week = this.dayWeeks(ymd);
				let dayWeek = {
					year: this.year,
					month: this.month,
					day: this.day,
					week: week
				};
				this.weeksday = dayWeek;
			},
			//一个月的对应星期
			dayWeeks(date) {
				date = new Date(date);
				let weeks = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
				return weeks[date.getDay()]
			},
			//获取用户id
			getUserId() {
				this.userId = uni.getStorageSync('id');
			},
			isToday(date) { // 是否当天
				date = date.year + '-' + date.month + '-' + date.day;
				let time = new Date(date);
				let {
					year,
					month,
					day
				} = getToday(new Date());
				let {
					year: y,
					month: m,
					day: d
				} = getToday(time);
				return year === y && (month) === m && day === d;
			},
			//是否为当前月
			isCurrentMonth(date) { //是否当月
				date = date.year + '-' + date.month + '-' + date.day;
				let time = new Date(date);
				let {
					year,
					month
				} = getToday(getDate(this.year, this.month-1, 1));
				let {
					year: y,
					month: m
				} = getToday(time);
				return year === y && month === m;
			},
			//选择时间
			bindDateChange: function(e) {
				let arr = e.detail.value.split("-");
				this.year = arr[0];
				this.month = arr[1];
				this.dateTime();
				this.getSearchUser();
			},
			//-------------------------------------------
			//跳转到信息发送界面
			onNavigationBarButtonTap() {
				uni.navigateTo({
					url: '/pages/duty/index'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.top_today_duty {
		width: 100%;
		height: 150rpx;
		text-align: center;
		border-bottom-left-radius: 20px;
		border-bottom-right-radius: 20px;
		background-color: #109EF8;
		position: relative;

		.top_duty_user {
			padding-top: 3%;
			font-size: 38rpx !important;
		}
		
		picker{
			position: absolute;
			right: 0;
			top: 0;
			margin-top: 2%;
			margin-right: 3%;
			image{
				width: 70rpx;
				height: 70rpx;
			}
		}
	}

	.caledar {
		// width: 94%;
		// margin: 6% auto 0 auto;

		.dateWeek {
			display: grid;
			margin-top: 2%;
			grid-template-columns: repeat(7, 14.25%);
			text-align: center;
			background-color: #c3c3c3;
			color: #FFFFFF;

			view {
				border: 1px solid #dddddd;
			}
		}

		.dates {
			width: 100%;
			display: grid;
			grid-template-columns: repeat(7, 14.25%);
			grid-template-rows: repeat(6, 120rpx);
			text-align: center;

			.datetime {
				border: 1px solid #dddddd;
				background-color: #FFFFFF;
				position: relative;

				.textday {
					width: 44rpx;
					display: inline-block;
					font-size: 36rpx;
					margin-top: 10%;
					color: #333333;
				}
				
				.tooltip{
					z-index: 99;
					position: absolute;
					left: -10%;
					bottom: -75%;
					background-color: #000000;
					color: #FFFFFF;
					opacity: 0.8;
					border-radius: 10px;
					margin: 2%;
				}
				.tooltip_r{
					z-index: 99;
					position: absolute;
					right: -10%;
					bottom: -75%;
					background-color: #000000;
					color: #FFFFFF;
					opacity: 0.8;
					border-radius: 10px;
					margin: 2%;
				}
			}
		}
	}

	.notCurrentMonth {
		color: #bebebe !important;
		pointer-events: none;
		background: none;
	}
</style>
